<template>
  <view class="container">
    <view class="info-box">
      <view class="info-name">姓名：{{student.userName}}</view>
      <view class="info-result">成绩：{{student.userScoreOffice > 0 ? student.userScoreOffice : student.userScore}}分</view>
    </view>
    <view class="list-box">
      <view @tap="recommend(index)"
            class="list-item"
            v-for="(item,index) in dataList"
            :key="item.id">
        <view class="university-logo">
          <image :src="staticUrl + item.universityBadge"></image>
        </view>
        <view class="university-name-label">
          <view class="university-name">{{item.universityName}}</view>
          <view class="university-label-box">
            <view class="university-label"
                  v-for="label in item.universityLabels"
                  :key="label.labelId">{{label.labelName}}</view>
          </view>
        </view>
        <view class="university-major">{{item.matchUniversityMajor}}</view>
        <view class="recommend"
              v-if="item.matchUniversityIsRecommend == 1">
          <image src="../../static/images/recommend.png"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { myRequest, showToastMsg, serverUrl, staticUrl } from '../../utils'

export default {
  data () {
    return {
      id: 0,
      loading: false,
      recommendIndex: -1,
      student: {},
      dataList: [],
      serverUrl: serverUrl,
      staticUrl: staticUrl
    }
  },

  onLoad (options) {
    this.id = options.id
    this.fetchData()
  },

  methods: {

    fetchData () {
      const that = this

      uni.showLoading({
        title: '加载中'
      })

      let success = function (res) {
        uni.hideLoading()
        if (res.data.code != 20000) {
          return showToastMsg(res.data.message)
        }

        that.student = res.data.data.student
        that.dataList = res.data.data.list
      }

      let param = {
        url: '/fans/university',
        data: { id: that.id }
      }

      myRequest(param, success)
    },

    recommend (index) {

      const that = this

      if (that.dataList[index].matchUniversityIsRecommend == 1) {
        return showToastMsg('已经推荐过了')
      }

      if (that.loading) {
        return
      }

      that.loading = true
      uni.showLoading({
        title: '正在推荐'
      })

      let success = function (res) {
        that.loading = false
        uni.hideLoading()
        if (res.data.code != 20000) {
          return showToastMsg(res.data.message)
        }
        showToastMsg(res.data.message)
        if (that.recommendIndex > -1) {
          that.dataList[that.recommendIndex].matchUniversityIsRecommend = 0
        }
        that.recommendIndex = index
        that.dataList[index].matchUniversityIsRecommend = 1
      }

      let param = {
        url: '/expert/recommend',
        data: { id: that.dataList[index].matchUniversityId }
      }

      myRequest(param, success)

    }

  }
}
</script>

<style>
page {
  background-color: #eeeeee;
}

.container {
  width: 750rpx;
  height: auto;
}

.info-box {
  width: 750rpx;
  height: 90rpx;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #666666;
}

.info-name {
  margin-right: 40rpx;
}

.info-result {
  margin-left: 40rpx;
}

.list-box {
  width: 750rpx;
  height: auto;
  background-color: #ffffff;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list-item {
  width: 660rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #ffffff;
  height: 180rpx;
  color: #333333;
  border-bottom: solid 1rpx #f5f5f5;
  position: relative;
}

.university-logo {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.university-logo image {
  width: 130rpx;
  height: 130rpx;
}

.university-name-label {
  width: 340rpx;
  margin-left: 20rpx;
}

.university-name {
  font-size: 30rpx;
  margin-top: 40rpx;
}

.university-label-box {
  display: flex;
  flex-direction: row;
  margin-top: 14rpx;
}

.university-label-box {
  display: flex;
  flex-direction: row;
  margin-top: 14rpx;
}

.university-label {
  font-size: 20rpx;
  color: #999999;
  border: solid 1rpx #f5f5f5;
  margin-right: 8rpx;
  padding-left: 12rpx;
  padding-right: 12rpx;
  padding-top: 2rpx;
  padding-bottom: 3rpx;
}

.university-major {
  font-size: 24rpx;
  margin-top: 40rpx;
  color: #666666;
}

.recommend {
  position: absolute;
  top: 0;
  left: 618rpx;
  opacity: 0.4;
  width: auto;
  height: auto;
}

.recommend image {
  width: 90rpx;
  height: 90rpx;
}
</style>
